<!--
 * @Description:
 * @Author: william
 * @Date: 2025-02-17 16:47:40
 * @LastEditors: william
 * @LastEditTime: 2025-06-27 11:06:05
-->
<template>
  <BaseDialog
    v-model="dialogVisible"
    :title="g_t('fleet.driverConfirmOrder')"
    width="85%"
    :before-close="handleClose"
  >
    <el-descriptions
      v-loading="viewLoading"
      :column="1"
      border
      :label-width="140"
    >
      <el-descriptions-item width="200">
        <template #label>{{ $t('fleet.orderNumber') }}</template>
        {{ formData.id || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('fleet.customerName') }}</template>
        {{ formData.customerName || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('fleet.customerContact') }}</template>
        {{ formData.customerContact || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('fleet.contactPhone') }}</template>
        {{ formData.customerContactPhone || '--' }}
      </el-descriptions-item>
    </el-descriptions>
    <BaseTable
      ref="refTravelTable"
      :data="formData.tripInfo"
      row-key="id"
      style="margin: 10px 0"
    >
      <TableColumn :label="$t('fleet.departure')" class="ignore">
        <TableColumn
          prop="startRegionCode"
          :label="$t('public.region')"
          :column-width="travelColumnWidth.startRegionCode"
        >
          <template #default="{ row }">
            <span>{{ g_utils.getRegionName(row.startRegionCode) }}</span>
          </template>
        </TableColumn>
        <TableColumn
          prop="startAddress"
          :label="$t('public.detailAddress')"
          :column-width="travelColumnWidth.startAddress"
        />
      </TableColumn>
      <TableColumn :label="$t('fleet.destination')" class="ignore">
        <TableColumn
          prop="endRegionCode"
          :label="$t('public.region')"
          :column-width="travelColumnWidth.endRegionCode"
        >
          <template #default="{ row }">
            <span>{{ g_utils.getRegionName(row.endRegionCode) }}</span>
          </template>
        </TableColumn>
        <TableColumn
          prop="endAddress"
          :label="$t('public.detailAddress')"
          :column-width="travelColumnWidth.endAddress"
        />
      </TableColumn>
      <TableColumn
        prop="startTime"
        :label="$t('fleet.departureTime')"
        :column-width="travelColumnWidth.startTime"
      />
      <TableColumn
        prop="endTime"
        :label="$t('public.endTime')"
        :column-width="travelColumnWidth.endTime"
      />
      <TableColumn
        prop="kilometres"
        :label="$t('fleet.travelDistance')"
        :column-width="travelColumnWidth.kilometres"
      >
        <template #default="{ row }"
          >{{ row.kilometres }}{{ $t('fleet.kilometer') }}</template
        >
      </TableColumn>
    </BaseTable>
    <!-- <el-descriptions
      v-loading="viewLoading"
      :column="1"
      border
      :label-width="140"
    >
      <el-descriptions-item width="200">
        <template #label>{{ $t('fleet.departure') }}</template>
        <span>{{
          g_utils.getRegionName(formData.tripInfo?.startRegionCode) || '--'
        }}</span>
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('fleet.destination') }}</template>
        <span>{{
          g_utils.getRegionName(formData.tripInfo?.endRegionCode) || '--'
        }}</span>
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('fleet.departureTime') }}</template>
        {{ formData.tripInfo?.startTime || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('public.endTime') }}</template>
        {{ formData.tripInfo?.endTime || '--' }}
      </el-descriptions-item>
    </el-descriptions> -->
    <template #footer>
      <div class="detail-dialog-footer">
        <!-- :disabled="!formData.id" -->
        <el-button plain type="primary" @click="handleConfirm">{{
          $t('public.confirm')
        }}</el-button>
      </div>
    </template>
  </BaseDialog>
</template>

<script setup>
const dialogVisible = defineModel({
  type: Boolean,
  default: true
})
const route = useRoute()
const viewLoading = ref(false)
const formData = ref({
  tripInfo: []
})
const refTravelTable = ref(null)
const travelColumnWidth = ref({})

watch(
  () => formData.value.tripInfo,
  nv => {
    nextTick(() => {
      useTableColumnWidth({
        refTable: refTravelTable.value
      }).getTableColumnWidth(data => {
        travelColumnWidth.value = data
      })
    })
  },
  {
    deep: true
  }
)

onMounted(() => {
  if (route.query.tenantId && route.query.vehicleId) getFormData()
})

const getFormData = () => {
  viewLoading.value = true
  Promise.any([
    g_api.fleet.apiOrderDriverConfirm({
      tenantId: route.query.tenantId,
      vehicleId: route.query.vehicleId
    }),
    g_api.fleet.apiOrderDriverConfirm2({
      tenantId: route.query.tenantId,
      vehicleId: route.query.vehicleId
    })
  ])
    .then(({ code, data }) => {
      // console.log('requests succeeded:', code, data)
      if (code === '200' && data) {
        formData.value = data
      }
    })
    .finally(() => {
      viewLoading.value = false
    })
  // const allSettled = [
  //   g_api.fleet.apiOrderDriverConfirm,
  //   g_api.fleet.apiOrderDriverConfirm2
  // ].map(item => {
  //   return item({
  //     tenantId: route.query.tenantId,
  //     vehicleId: route.query.vehicleId
  //   }).then(
  //     data => data,
  //     err => null
  //   )
  // })
  // Promise.all(allSettled)
  //   .then(results => {
  //     console.log('requests succeeded:', results)
  //     const { code, data } = results.find(item => item) || {}
  //     if (code === '200' && data) {
  //       formData.value = data
  //     }
  //   })
  //   .finally(_ => {
  //     viewLoading.value = false
  //   })
}

const handleClose = () => {
  dialogVisible.value = false
}

const handleConfirm = () => {
  viewLoading.value = true
  ElMessageBox.confirm(
    '请确认客户信息和线路信息无误后，请点击【确认】按钮。',
    '提示',
    {
      confirmButtonText: g_t('public.confirm'),
      cancelButtonText: g_t('public.cancel'),
      type: 'warning'
    }
  )
    .then(() => {
      Promise.any([
        g_api.fleet.apiOrderDriverComplete({
          orderId: formData.value.id,
          vehicleId: route.query.vehicleId
        }),
        g_api.fleet.apiOrderDriverComplete2({
          orderId: formData.value.id,
          vehicleId: route.query.vehicleId
        })
      ])
        .then(res => {
          // console.log('requests succeeded:', res)
          if (res.code === '200') {
            ElMessage({
              message: res.message,
              type: 'success'
            })
            handleClose()
          }
        })
        .finally(() => {
          viewLoading.value = false
        })
    })
    .catch(() => {})
  // const allSettled = [
  //   g_api.fleet.apiOrderDriverComplete,
  //   g_api.fleet.apiOrderDriverComplete2
  // ].map(promise => {
  //   return promise({
  //     orderId: formData.value.id,
  //     vehicleId: route.query.vehicleId
  //   }).then(
  //     data => data,
  //     err => null
  //   )
  // })
  // Promise.all(allSettled)
  //   .then(results => {
  //     // console.log('requests succeeded:', results)
  //     const res = results.find(item => item) || {}
  //     if (res.code === '200') {
  //       ElMessage({
  //         message: res.message,
  //         type: 'success'
  //       })
  //       handleClose()
  //     }
  //   })
  //   .finally(_ => {
  //     viewLoading.value = false
  //   })
}
</script>

<style scoped lang="scss"></style>
